<script setup lang="ts">
  import { ref, defineEmits } from 'vue';
  import { useI18n } from '@/hooks/web/useI18n';
  import { CloseOutlined } from '@ant-design/icons-vue';
  import { photosDelete, postDelete } from '@/api/demo/device';
  import { message } from 'ant-design-vue';

  const fixJsonString = (input) => {
    // 移除URL周围的反引号
    let fixed = input.replace(/`([^`]+)`/g, '$1');
    // 如果字符串以双引号开始和结束，则移除它们
    if (fixed.startsWith('"') && fixed.endsWith('"')) {
      fixed = fixed.substring(1, fixed.length - 1);
    }
    return fixed;
  };
  const formatJson1 = (jsonString) => {
    try {
      if (!jsonString) return '';
      const fixedString = fixJsonString(jsonString);
      const jsonObj = JSON.parse(fixedString);
      return JSON.stringify(jsonObj, null, 2);
    } catch (error) {
      console.error('JSON格式化失败:', error.message);
      return '无效的JSON数据';
    }
  };
  const emit = defineEmits(['init-info-change']);
  const { t } = useI18n();
  const props = defineProps({
    imagesrc: {
      type: String,
      required: true,
    },
    imageText: {
      type: String,
      required: true,
    },
    itembox: {
      type: Object,
      required: true,
    },
  });
  const gatherdetalsTaskconfirm = () => {
    if (props.itembox.type == 'post') {
      postDelete(props.itembox.id).then((res) => {
        if (res.code == 200) {
          message.success(t('sys.configuration.deleteSucces'));
          emit('init-info-change');
        }
      });
    } else {
      photosDelete(props.itembox.id).then((res) => {
        if (res.code == 200) {
          message.success(t('sys.configuration.deleteSucces'));
          emit('init-info-change');
        }
      });
    }
  };
  const showOpen = ref(false);
  const showPostLive = ref([
    {
      title: 'id',
      dataIndex: 'id',
    },
    {
      title: t('sys.userlist.columns.name'),
      dataIndex: 'name',
    },
    {
      title: t('sys.userlist.columns.name'),
      dataIndex: 'name',
    },
  ]);
  const rolesList = ref(null);
  const resultRole = ref(null);
  const showPostdataSource = ref([]);
  const itemLve = ref(0);
  const showOpenclick = (it) => {
    itemLve.value = it;
    rolesList.value = JSON.parse(localStorage.getItem('rolesList'));
    resultRole.value = rolesList.value.find((item) => item.roleId === 1);

    if (it == 1) {
      showPostLive.value = [
        {
          title: t('sys.userlist.userId'),
          dataIndex: 'id',
          width: 150,
        },
        {
          title: t('sys.userlist.columns.name'),
          dataIndex: 'name',
        },
        {
          title: t('sys.userlist.report'),
          dataIndex: 'analyzes',
          width: 150,
          ellipsis: true,
        },
        {
          title: t('sys.configuration.action'),
          dataIndex: 'operation',
          key: 'operation',
        },
      ];
      showPostdataSource.value = props.itembox.postLikeList;
    } else {
      showPostLive.value = [
        {
          title: t('sys.userlist.userId'),
          dataIndex: 'id',
          width: 150,
        },
        {
          title: t('sys.userlist.columns.name'),
          dataIndex: 'name',
        },
        {
          title: 'profile',
          dataIndex: 'comment',
          ellipsis: true,
          width: 150,
        },
        {
          title: t('sys.userlist.report'),
          width: 150,
          dataIndex: 'analyzes',
          ellipsis: true,
        },
        {
          title: t('sys.configuration.action'),
          dataIndex: 'operation',
          key: 'operation',
        },
      ];
      showPostdataSource.value = props.itembox.postCommentList;
    }
    if (resultRole.value) {
      showPostLive.value.splice(2, 0, {
        title: 'description',
        dataIndex: 'avatarDescription',
        ellipsis: true,
        width: 150,
      });
    }
    showOpen.value = true;
  };
  const expandedRowKeys = ref([]);
  const onExpand = (expanded: boolean, record: any) => {
    const index = expandedRowKeys.value.indexOf(record.id);
    if (expanded && index === -1) {
      expandedRowKeys.value.push(record.id);
    } else if (!expanded && index !== -1) {
      expandedRowKeys.value.splice(index, 1);
    }
  };
  const toggleMonitoring = (record) => {
    if (expandedRowKeys.value.includes(record.id)) {
      expandedRowKeys.value = [];
      return;
    }
    expandedRowKeys.value = [record.id];
  };
  const imageShow = ref(false);
</script>

<template>
  <a-card>
    <a-modal width="50%" v-model:open="showOpen">
      <a-table
        bordered
        rowKey="id"
        :columns="showPostLive"
        :showExpandColumn="false"
        :dataSource="showPostdataSource"
        v-model:expandedRowKeys="expandedRowKeys"
        @expand="onExpand"
      >
        <template #expandedRowRender="{ record }">
          <div v-if="itemLve == 2"> {{ t('sys.configuration.comment') }}：{{ record.comment }}</div>
          <div v-if="resultRole">
            {{ t('sys.configuration.describe') }}：{{ record.avatarDescription }}
          </div>
          <div>
            {{ t('sys.userlist.Marketers') }}：<span style="color: red">{{
              record.marketingRate
            }}</span>
          </div>
          <div>
            {{ t('sys.userlist.Investment') }}:<span style="color: #ffd700">{{
              record.investRate
            }}</span>
          </div>
          <div> {{ t('sys.userlist.report') }}{{ record.analyzes }}</div>
        </template>
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'name'">
            <a-image width="30px" :src="record.avatar" />
            {{ record.name }}
          </template>
          <template v-if="column.dataIndex === 'operation'">
            <a-space>
              <a-button @click="toggleMonitoring(record)" type="link">
                {{ expandedRowKeys.includes(record.id) ? '收起' : '展开' }}
              </a-button>
            </a-space>
          </template>
        </template>
      </a-table>
    </a-modal>
    <div class="image-box mb-4 image-hove">
      <a-image width="100%" height="300px" :preview="false" class="" :src="props.imagesrc" />
      <div class="ant-image-mask1" @click="imageShow = true">
        <div class="ant-image-mask-info"
          ><span role="img" aria-label="eye" class="anticon anticon-eye">
            <svg
              focusable="false"
              data-icon="eye"
              width="1em"
              height="1em"
              fill="currentColor"
              aria-hidden="true"
              viewBox="64 64 896 896"
            >
              <path
                d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
              />
            </svg>
          </span>
          {{ t('sys.userlist.preview') }}
        </div>
      </div>
      <div
        v-if="imageShow"
        @click="imageShow = false"
        class="w-full h-full fixed z-1080 flex justify-center color-white items-center top-0 left-0 bg-[#000000BF]"
      >
        <div
          class="w-full h-46px fixed top-0 left-0 z-1090 flex items-center justify-end px-20px bg-[#000000CC]"
        >
          <CloseOutlined :style="{ fontSize: '25px' }" />
        </div>
        <div @click.stop class="flex justify-center align-center w-80% max-h-120 box-xs">
          <div class="flex justify-center items-center">
            <img :src="props.imagesrc" />
          </div>

          <div class="w-50% ml-16px py-20px witd-box">
            <div> {{ props.imageText }}</div>
            <div style="margin: 10px 0">
              <div class="mt-1"
                >{{ t('sys.userlist.columns.imageProcessStatus') }}:
                <a-tag v-if="props.itembox.imageProcessResult == 'ACCEPT'" color="blue">
                  {{ t('sys.configuration.taskprocess8') }}
                </a-tag>
                <a-tag v-else-if="props.itembox.imageProcessResult == 'NO'" color="error">
                  {{ t('sys.configuration.taskprocess9') }}
                </a-tag>

                <span v-else></span>
              </div>
            </div>
            <div>{{ formatJson1(props.itembox.imageProcessJson) }}</div>
          </div>
        </div>
      </div>
    </div>
    <!--    <div :class="['images-text', { 'ellipsis-text': isEllipsis }]">-->
    <!--      <div> {{ props.imageText }}</div>-->
    <!--    </div>-->
    <div v-if="props.itembox" class="w-full">
      <div
        @click="showOpenclick(1)"
        v-if="props.itembox.postLikeList && props.itembox.postLikeList.length > 0"
        class="flex justify-between items-center"
      >
        <span class="mr-2">{{ t('sys.userlist.postLikeList') }}:</span>
        <span
          class="ant-avatarcount"
          style="background-color: rgb(253 227 207); color: rgb(245 106 0)"
          ><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%)"
            >+{{ props.itembox.postLikeList.length }}</span
          ></span
        >
      </div>
      <div
        @click="showOpenclick(2)"
        v-if="props.itembox.postCommentList && props.itembox.postCommentList.length > 0"
        class="flex justify-between items-center"
      >
        <span class="mr-2">{{ t('sys.userlist.postCommentList') }}:</span>
        <span
          class="ant-avatarcount"
          style="background-color: rgb(253 227 207); color: rgb(245 106 0)"
          ><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%)"
            >+{{ props.itembox.postCommentList.length }}</span
          ></span
        >
      </div>
    </div>
    <div class="w-full">
      <div class="text-right flex justify-end">
        <div>
          <a-button @click="imageShow = true" type="primary"
            >{{ t('sys.device.examine') }}
          </a-button>
          <a-popconfirm
            @confirm="gatherdetalsTaskconfirm"
            :title="t('sys.configuration.IsDelete')"
            :ok-text="t('sys.configuration.comfig')"
            :cancel-text="t('sys.configuration.cancel')"
          >
            <a-button class="ml-10px" danger type="primary">
              {{ t('sys.configuration.delete') }}
            </a-button>
          </a-popconfirm>
        </div>
      </div>
    </div>
  </a-card>
</template>

<style scoped lang="less">
  .images-text {
    /* 初始样式 */
  }

  .ant-avatarcount {
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 50%;
    background: rgb(0 0 0 / 25%);
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
      'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
      'Noto Color Emoji';
    font-size: 14px;
    line-height: 30px;
    list-style: none;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
  }

  .image-hove {
    position: relative;
  }

  .ant-image-mask1 {
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s;
    opacity: 0;
    background: rgb(0 0 0 / 50%);
    color: #fff;
    cursor: pointer;
    inset: 0;
  }

  .ant-image-mask1:hover {
    opacity: 1;
  }

  .ellipsis-text {
    display: -webkit-box; /* 设置为 WebKit 内核的弹性盒子模型 */
    -webkit-box-orient: vertical; /* 垂直排列 */
    -webkit-line-clamp: 3; /* 限制显示三行 */
    overflow: hidden; /* 隐藏超出范围的内容 */
    text-overflow: ellipsis; /* 使用省略号 */
  }

  @media screen and (max-width: 1000px) {
    .box-xs {
      flex-direction: column;
    }

    .witd-box {
      width: 100% !important;
    }
  }
</style>
